import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import debounce from 'lodash/debounce';

import './FormContent.less';

import { Card, Space, Form, Input, Button, Row, Col, Select, Radio, Spin, Modal } from 'antd';
import FormItem from 'antd/lib/form/FormItem';

const { Option } = Select;

const formItemLayout = {
  labelCol: {
    span: 9,
  },
  wrapperCol: {
    span: 15,
  }
}

const formColLayout = {
  labelCol: {
    span: 3,
  },
  wrapperCol: {
    span: 21,
  }
}

const formItemCol = 8;

@inject('form')
@observer
class FormContent extends Component {

  constructor(props) {
    super(props);
    this.handleSearch = debounce(this.handleSearch, 800);
  }

  state = {
    fetching: false,
  }

  componentDidMount() {
    this.props.form.getDictList()
    this.props.form.getSchemeAttrList()
  }

  handleSearch = value => {
    this.setState({ fetching: true }, () => {
      this.props.form.getSuggest(value).then(() => {
        this.setState({ fetching: false })
      });
    })
  }

  attributeGroup(attr) {

    let suggestOptions = null;
    if (this.props.form.suggest && this.props.form.suggest.length) {
      suggestOptions = this.props.form.suggest.map(d => <Option key={d[1]}>{d[0]}</Option>)
    }

    return (
      <Card
        title="基础信息"
        size="small"
        bodyStyle={{ paddingRight: '60px', paddingTop: '30px' }}
      >
        <Row>
          <Col span={formItemCol}>
            <Form.Item
              {...formItemLayout}
              label="编号"
              name="NUMBER"
              rules={[{ required: true, message: '必填'}]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={formItemCol}>
            <Form.Item
              {...formItemLayout}
              label="申请研发组织"
              name="APL_RD_ORG"
              rules={[{ required: true, message: '必选'}]}
            >
              <Select placeholder="请选择">
                {
                  this.props.form['APL_RD_ORG'].map(item => {
                    return (
                      <Option key={item.id} value={item.id}>{item.name}</Option>
                    )
                  })
                }
              </Select>
            </Form.Item>
          </Col>
          <Col span={formItemCol}>
            <Form.Item
              {...formItemLayout}
              label="立项申请事业部"
              name="BU"
              rules={[{ required: true, message: '必选'}]}
            >
              <Select placeholder="请选择">
                {
                  this.props.form['BU'].map(item => {
                    return (
                      <Option key={item.code} value={item.code}>{item.name}</Option>
                    )
                  })
                }
              </Select>
            </Form.Item>
          </Col>
        </Row>

        <Row>
          <Col span={24}>
            <FormItem
              {...formColLayout}
              label="描述"
              name="DESCRIPTION"
              rules={[{ required: true, message: '必填'}]}
            >
              <Input.TextArea />
            </FormItem>
          </Col>
        </Row>

        <Row>
          <Col span={24}>
            <FormItem
              {...formColLayout}
              label="英文描述"
              name="EN_DESCRIPTION"
              rules={[{ required: true, message: '必填'}]}
            >
              <Input.TextArea />
            </FormItem>
          </Col>
        </Row>

        <Row>
          <Col span={formItemCol}>
            <Form.Item
              {...formItemLayout}
              label="自制/外购"
              name="SELF_OR_OUTSIDE"
              rules={[{ required: true, message: '必选'}]}
            >
              <Radio.Group>
                <Radio value="self">自制</Radio>
                <Radio value="outsid">外购</Radio>
              </Radio.Group>
            </Form.Item>
          </Col>
          <Col span={formItemCol}>
            <Form.Item
              {...formItemLayout}
              label="主销售型号"
              name="MAIN_SALE_MODEL"
              rules={[{ required: true, message: '必选'}]}
            >
              <Input />
            </Form.Item>
          </Col>
          <Col span={formItemCol}>
            <Form.Item
              {...formItemLayout}
              label="可销售事业部"
              name="SALES_BU"
              rules={[{ required: true, message: '必选'}]}
            >
              <Select placeholder="请选择">
                {
                  this.props.form['SALES_BU'].map(item => {
                    return (
                      <Option key={item.code} value={item.code}>{item.name}</Option>
                    )
                  })
                }
              </Select>
            </Form.Item>
          </Col>
        </Row>

        <Row>
          <Col span={formItemCol}>
            <Form.Item
              {...formItemLayout}
              label="制造采购组织"
              name="PRODECE_ORG"
              rules={[{ required: true, message: '必选'}]}
            >
              <Select placeholder="请选择">
                {
                  this.props.form['PRODECE_ORG'].map(item => {
                    return (
                      <Option key={item.code} value={item.code}>{item.name}</Option>
                    )
                  })
                }
              </Select>
            </Form.Item>
          </Col>
          <Col span={formItemCol}>
            <Form.Item
              {...formItemLayout}
              label="输入搜索"
              name="suggest"
              rules={[{ required: true, message: '必选'}]}
            >
              <Select
                showSearch
                placeholder="请选择"
                onSearch={this.handleSearch}
                showArrow={false}
                filterOption={false}
                notFoundContent={this.state.fetching ? <Spin size="small" /> : null}
              >
                {suggestOptions}
              </Select>
            </Form.Item>
          </Col>
        </Row>

        <Row>
          <Col span={24}>
            <FormItem
              {...formColLayout}
              label="备注"
              name="MEMO"
            >
              <Input.TextArea />
            </FormItem>
          </Col>
        </Row>

      </Card>
    )
  }

  changeName = (e) => {
  }

  changeInfo = (e) => {
    this.props.form.changeInfo(e.target.value);
  }

  onFinish = values => {
    console.log('Sumbmit: ', values);
    Modal.success({
      content: JSON.stringify(values),
    })
  }

  render() {
    return (
      <Form
        onFinish={ this.onFinish }
      >
        <Space direction="vertical" style={{width: '100%'}}>
          { this.attributeGroup() }

          <Form.Item style={{textAlign: 'center'}}>
            <Button type="primary" htmlType="submit">提交</Button>
          </Form.Item>
        </Space>
      </Form>
    )
  }
}

export default FormContent;